<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>箭头函数实践</title>
    <style>
      div {
        width: 200px;
        height: 200px;
        background: #58a;
      }
    </style>
  </head>
  <body>
    <div id="ad"></div>
    <script>
      //需求-1  点击 div 2s 后颜色变成『粉色』
      // 获取元素
      let ad = document.getElementById("ad");
      // 绑定事件
      ad.addEventListener("click", function () {
        // 保存 this
        let _this = this;
        // 定时器
        window.setTimeout(function () {
          console.log(this); // this 指向 window setTimeout属于window下的方法
          this.style.background = "pink"; // 报错
          // 解决办法 使用外部this
          _this.style.background = "pink";
        }, 2000);

        // 使用箭头函数 this指向为静态的始终指向声明时所在的作用域下的this,即指向外层作用域的this
        /* setTimeout(() => {
          console.log(this);
          this.style.background = 'pink';
        }, 2000); */
      });

      //需求-2  从数组中返回偶数的元素
      const arr = [1, 6, 9, 10, 100, 25];
      /* const newresult = arr.filter(function (item) {
        if (item % 2 === 0) {
          return true;
        } else {
          return false;
        }
      }); */
      /* filter()方法用于创建一个新的数组，包含通过p回调函数的所有元素。filter()方法会遍历一个数组，对每个元素执行回调函数，然后返回所有使得该函数返回值为true的元素组成的新数组。 */

      // 使用箭头函数
      const newresult = arr.filter((item) => item % 2 == 0);
      console.log(newresult); // [6, 10, 100]

    </script>
  </body>
</html>
